<script setup lang="ts">
defineOptions({
  name: "realName"
});
import { computed, reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { realName, getUserInfoV1 } from "@/api/user";
import { message } from "@/utils/message";

const router = useRouter();

const navigateTo = (routePath: string) => {
  router.push(routePath).catch((err: Error) => {
    if (
      err.name !== "NavigationDuplicated" &&
      !err.message.includes("Avoided redundant navigation to current location")
    ) {
      console.error(err);
    }
  });
};
let user_data = ref({
  email: "",
  real_name_state: '',
  real_name_type: 1,
  name: "xxxxx",
  card_id: "",
  user_type: ""
});
function setUser() {
  getUserInfoV1().then(res => {
    if (res.data.code == 200) {
      user_data.value = res.data.data;
      console.log(user_data);
    }
  });
}
onMounted(() => {
  setUser();
});
const centerDialogVisible = ref(false);

const user_info = ref({
  name: "",
  phone: "",
  card_id: ""
});

const update_loading = ref(false);
const formRef = ref();
//实名
const pcReal = ref(false);
const pcimg = ref('');
const realurl = ref('');

const update_user_info = () => {
  // if()
  if (!formRef.value) return;
  formRef.value.validate((valid, fields) => {
    if (valid) {
      realName({ ...user_info.value ,real_name_type:1})
        .then(res => {
          console.log('进行实名', res);
          if (isMobileDevice()) {
            console.log('是移动端');
            realurl.value=res.data.real_url
            window.open(realurl.value, '_blank');
            
          } else {
            console.log('是电脑端');
            pcimg.value = res.data.real_img;
            pcReal.value = true;
           
          }
        })
        .finally(() => {
          update_loading.value = false;
          centerDialogVisible.value = false;
          let timer=setInterval(() => {
            getUserInfoV1().then(res => {
              if (res.data.code == 200&&res.data.data.real_name_state==1) {
                user_data.value = res.data.data;
                clearInterval(timer);
                message("操作成功", {
                  type: "success"
                });
                pcReal.value = false;
                
              }
            });
            
          },1000)
        });
    }
  });
};

const user_data_rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  phone: [
    {
      required: true,
      max: 11,
      min: 11,
      message: "请输入正确的手机号码",
      trigger: "blur"
    }
  ],
  card_id: [
    {
      required: true,
      max: 18,
      min: 18,
      message: "请输入正确的身份证号码",
      trigger: "blur"
    }
  ]
});
function isMobileDevice() {
  const userAgent = navigator.userAgent;
  // 检查是否包含常见的移动端关键字
  const mobileKeywords = ['Mobile', 'Android', 'iPhone', 'iPad', 'iPod', 'Windows Phone', 'Opera Mini'];
  for (let keyword of mobileKeywords) {
    if (userAgent.includes(keyword)) {
      return true;
    }
  }
  return false; 
}




</script>

<template>
  <div class="realName_body">
    <el-col v-if="user_data.real_name_state == 0">
      <el-result icon="error" title="未实名" sub-title="请点击下方按钮进行实名认证">
        <template #extra>
          <el-button type="primary" @click="centerDialogVisible = true">实名认证</el-button>
        </template>
      </el-result>
    </el-col>

    <el-col v-else-if="user_data.real_name_state == 2">
      <el-result icon="info" title="实名审核中">
        <template #sub-title>
          <p>实名信息正在审核，请耐心等待</p>
        </template>
        <template #extra>
          <el-button type="primary" disabled>审核中</el-button>
        </template>
      </el-result>
    </el-col>

    <el-col v-else-if="user_data.real_name_state == 1">
      <el-result icon="success" title="认证通过">
        <template #sub-title>
          <p v-if="user_data.real_name_type == 1">
            <el-tag type="success" size="small">个人认证</el-tag>
          </p>
          <p v-else-if="user_data.real_name_type == 2">
            <el-tag type="primary" size="small">企业认证</el-tag>
          </p>
          <p>姓名：{{ user_data.name }}</p>
        </template>
        <template #extra>
          <el-button type="primary" @click="navigateTo('/self/info')">个人信息</el-button>
        </template>
      </el-result>
    </el-col>

    <!-- 实名认证 -->
    <el-dialog v-model="centerDialogVisible" title="实名认证" width="500" center>
      <div>
        <el-form ref="formRef" label-width="auto" :model="user_info" style="max-width: 600px" :rules="user_data_rules">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="user_info.name" width="20px" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="user_info.phone" width="20px" placeholder="请输入手机号" />
          </el-form-item>

          <el-form-item label="身份证" prop="card_id">
            <el-input v-model="user_info.card_id" width="20px" placeholder="请输入身份证号码" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div v-loading="update_loading" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="update_user_info">
            提交认证
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="pcReal" title="实名认证" width="500" center>
    <p style='text-align: center'>请使用支付宝扫码进行实名认证！</p>
      <img :src="pcimg" alt="" style="width: 200px;height: 200px;margin:0 auto;">
    </el-dialog>
  </div>
</template>

<style>
.realName_body {
  display: flex;
 
  justify-content: center;
}
</style>
